<!DOCTYPE html>
<html lang="zh">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>骨架屏示例</title>
   <style>
       *{
           margin: 0;
           padding: 0;
       }
       @keyframes loading {
           0% {
               background-position: -400px 0
           }
 
           100% {
               background-position: 400px 0
           }
       }
 
       .box1 {
           position: absolute;
           margin: 0 auto;
           left: 50%;
           margin-left: -400px;
           top: 0;
           width: 800px;
           height: 60px;
           background-color: blue;
           /* 图像线性渐变写法 */
           background-image: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
           animation-duration: 1s;
           animation-iteration-count: infinite;
           animation-name: loading;
           animation-timing-function: linear;
           transition: 0.3s;
       }
       .bgMasker {
           background-color: #fff;
       }
 
       .line1 {
           background-color: #fff;
           height: 20px;
           position: absolute;
           right: 0;
           top: 0;
           left: 60px;
       }
 
       .line2 {
           background-color: #fff;
           height: 20px;
           position: absolute;
           right: 700px;
           top: 20px;
           left: 60px;
       }
 
       .line3 {
           background-color: #fff;
           height: 20px;
           position: absolute;
           left: 400px;
           right: 0;
           top: 20px;
       }
 
       .line4 {
           background-color: #fff;
           height: 20px;
           top: 40px;
           position: absolute;
           left: 60px;
           right: 500px;
       }
 
       .line5 {
           background-color: #fff;
           height: 20px;
           position: absolute;
           left: 600px;
           right: 0;
           top: 40px;
       }
   </style>
</head>
 
<body>
   <!-- 骨架 -->
   <div class="box1">
       <div class="bgMasker line1"></div>
       <div class="bgMasker line2"></div>
       <div class="bgMasker line3"></div>
       <div class="bgMasker line4"></div>
       <div class="bgMasker line5"></div>
   </div>
</body>
 
</html>